<template>
  <div id="rpg" class="bg">
    <div class="sun"></div>
    <sprite
      @moveEnd="boyMoveEnd"
      :action="true"
      class="boy"
      :spriteObj="boy"
    ></sprite>
    <sprite
      @moveEnd="girlMoveEnd"
      :action="girlAction"
      class="girl"
      :spriteObj="girl"
    ></sprite>
    <dialog-box
      @close="dialogClose"
      v-if="isShow"
      :dialogueArr="dialogueArr"
    ></dialog-box>
    <typed v-if="typedShow" @completeOver="completeOver"></typed>
  </div>
</template>

<script setup>
import { boyData, girlData, dialogueContent } from '@/config/index'
import { reactive, ref } from "vue";
import DialogBox from "@/components/dialogBox/index.vue";
import Sprite from "@/components/sprite/index.vue";
import Typed from "@/components/typed/index.vue";

let isShow = ref(false); // 对话框窗口开关
let typedShow = ref(false); // 咒语窗口开关
let girlAction = ref(false); // 女孩动作开关, 导演喊一句action后，演员开始演绎
const boy = reactive(boyData); // 男孩精灵图动画描述
const girl = reactive(girlData); // 女孩精灵图动画描述
const dialogueArr = reactive(dialogueContent); // 剧本

// 男孩移动动画结束
function boyMoveEnd() {
  isShow.value = true;
}
// 完成输入咒语
function completeOver() {
  girlAction.value = true;
}
// 女孩飞天动画结束
function girlMoveEnd() {}
// 对话窗口关闭
function dialogClose() {
  // 对话框关闭后，弹出咒语的窗口，二牛输入咒语后，嫦娥开始飞仙动作
  typedShow.value = true;
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
.bg {
  width: 720.5px;
  height: 450.5px;
  background: url("/images/ZhongQ.png") #829ada;
  background-size: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .sun {
    width: 80px;
    height: 80px;
    position: absolute;
    right: 120px;
    top: 50px;
    background: url("/images/sun.png");
    background-size: cover;
  }
  .boy {
    position: absolute;
    bottom: 90px;
    left: 10px;
    transform: translate3d(0, 0, 0, 0);
    transition: all 4s cubic-bezier(0.4, 1.07, 0.73, 0.72);
  }
  .girl {
    position: absolute;
    bottom: 155px;
    right: 300px;
    transform: translate3d(0, 0, 0, 0);
    transition: all 4s cubic-bezier(0.4, 1.07, 0.73, 0.72);
  }
}
</style>
